﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>捞海底商城后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/hogan.js/3.0.2/hogan.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- 顶部开始 -->
    <script type="text/javascript" src="./js/header.js"></script>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                    <li class="list" current>
                        <a href="index.html">
                            <i class="iconfont">&#xe761;</i>
                            信息汇总
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe70b;</i>
                            用户管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="member-list.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    用户列表
                                </a>
                            </li>
                            <li>
                                <a href="member-del.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    用户删除
                                </a>
                            </li>
                            <li>
                                <a href="member-view.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    浏览记录
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            分类管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="category.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    分类列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            订单管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu opened">
                            <li class="current">
                                <a href="order.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    订单列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            轮播管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu" style="display:none">
                            <li>
                                <a href="banner-list.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    轮播列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            综合统计
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu" style="display:none">
                            <li>
                                <a href="echarts1.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    销售额统计
                                </a>
                            </li>
                            <li>
                                <a href="echarts2.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    销量排行
                                </a>
                            </li>
                            <li>
                                <a href="echarts4.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    售出占比
                                </a>
                            </li>
                            <li>
                                <a href="echarts5.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    股市走向
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="content">
                <!-- 右侧内容框架，更改从这里开始 -->

                <div class="layui-form-pane" style="text-align: center;">
                    <p style="font-size: 32px; margin-bottom: 24px;">订单</p>

                </div>


                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>
                                订单ID
                            </th>
                            <th>
                                下单用户
                            </th>
                            <th>
                                金额(元)
                            </th>
                            <th>
                                支付状态
                            </th>
                            <th>
                                支付方式
                            </th>
                            <th>
                                支付时间
                            </th>
                            <th>
                                送货地址
                            </th>
                            <th>
                                订单状态
                            </th>
                            <th>
                                下单时间
                            </th>
                            <th>
                                收货时间
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                        <td>
                            <input type="checkbox" value="1" name="">
                        </td>
                        <td>
                            1
                        </td>
                        <td>
                            <u style="cursor:pointer" onclick="member_show('张三','member-show.html','10001','360','400')">
                                小明
                            </u>
                        </td>
                        <td >
                            男
                        </td>
                        <td >
                            13000000000
                        </td>
                        <td >
                            admin@mail.com
                        </td>
                        <td >
                            北京市 海淀区
                        </td>
                        <td>
                            2022-01-01 11:11:42
                        </td>
                        <td class="td-status">
                            <span class="layui-btn layui-btn-danger layui-btn-mini">
                                已删除
                            </span>
                        </td>
                        <td class="td-manage">
                            <a style="text-decoration:none" onclick="member_recover(this,'10001')" href="javascript:;" title="恢复">
                                <i class="layui-icon">&#xe618;</i>
                            </a>
                            <a title="彻底删除" href="javascript:;" onclick="member_unset(this,'1')" 
                            style="text-decoration:none">
                                <i class="layui-icon">&#xe640;</i>
                            </a>
                        </td>
                    </tr> -->
                    </tbody>
                </table>
                <!-- 右侧内容框架，更改从这里结束 -->
            </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2022 海底捞商城 All Rights Reserved. 本后台系统由凌晨三点海底捞提供技术支持</div>
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>
    </div>
    <!-- 背景切换结束 -->
    <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function () {
            laydate = layui.laydate;//日期插件

            //以上模块根据需要引入
            //



            var start = {
                min: laydate.now()
                , max: '2099-06-16 23:59:59'
                , istoday: false
                , choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };

            var end = {
                min: laydate.now()
                , max: '2099-06-16 23:59:59'
                , istoday: false
                , choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };

            document.getElementById('LAY_demorange_s').onclick = function () {
                start.elem = this;
                laydate(start);
            }
            document.getElementById('LAY_demorange_e').onclick = function () {
                end.elem = this
                laydate(end);
            }

        });

        //批量恢复提交
        function recoverAll() {
            layer.confirm('确认要批量恢复吗？', function (index) {
                //捉到所有被选中的，发异步进行恢复
                layer.msg('恢复成功', { icon: 1 });
            });
        }
        function member_show(title, url, id, w, h) {
            x_admin_show(title, url, w, h);
        }
        /*用户-恢复*/
        function member_recover(obj, id) {
            layer.confirm('确认要恢复吗？', function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已恢复!', { icon: 1, time: 1000 });
            });
        }
        /*用户-彻底删除*/
        function member_unset(obj, id) {
            layer.confirm('彻底删除无法恢复，确认要删除数据吗？', function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已彻底删除', { icon: 1, time: 1000 });
            });
        }
    </script>
    <script>
        const template_string = `{{#data}}
                    <tr>
                        <td>
                            <u>{{orderId}}</u>
                        </td>
                        <td >{{userId}}</td>
                        <td >{{price}}</td>
                        <td >{{payStatus}}</td>
                        <td >{{payType}}</td>
                        <td>{{payTime}}</td>
                        <td>{{address}}</td>
                        <td>{{status}}</td>
                        <td>{{createTime}}</td>
                        <td>{{receiptTime}}</td>
                    </tr>
                    {{/data}}`;
        let compiledResult = Hogan.compile(template_string);
        function addData(data) {
            let result = compiledResult.render({
                data: data
            });
            $('table.layui-table tbody').append(result);
        }

        axios({
            method: 'get',
            url: 'http://1.116.147.57:8080/order/list/all',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
                'Authorization': localStorage.getItem('token')
            }
        })
            .then(res => {
                res.data.data.forEach(element => {
                    for (let key in element) {
                        if (element[key] == null) {
                            element[key] = '无';
                        }
                    }
                });
                addData(res.data.data);
            })
            .catch(err => {
                console.error(err);
            })
    </script>
</body>

</html>